<template>
  <div class="admin-module">
    <div class="button-container">
      <el-button type="primary" @click="addNewBlogClick">新增文章</el-button>
    </div>

    <el-table
        :data="blogStore.blogList"
        border stripe
        :header-cell-style="tableHeaderStyle()"
        :cell-style="tableCellStyle()"
        :row-style="tableRowStyle()"
        class="card-item">
      <el-table-column type="index" align="center" width="50" />
      <el-table-column prop="title" label="标题" align="center" min-width="10%"/>
      <el-table-column prop="category" label="类别" align="center" min-width="10%" />
      <el-table-column label="精品" align="center" min-width="10%">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.isGreat">是</el-tag>
          <el-tag type="danger" v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="置顶" align="center" min-width="10%">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.topValue > 1">是</el-tag>
          <el-tag type="danger" v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="wordCount" label="字数" align="center" min-width="10%" />
      <el-table-column prop="visitCount" label="阅读次数" align="center" min-width="10%" />
      <el-table-column fixed="right" label="操作" align="center" width="250">
        <template #default="scope">
          <el-button type="primary" @click="previewBlogClick(scope.row)">预览</el-button>
          <el-button type="primary" @click="editBlogClick(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteBlogClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        v-model:current-page="blogStore.adminPageInfo.currentPage"
        :page-size="blogStore.adminPageInfo.pageSize"
        :total="blogStore.adminPageInfo.totalSize"
        layout="total, prev, pager, next"
        @change="changePageClick"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { useBlogStore } from '@/store/blog.ts'
import { IBlog } from '@/types/blog.ts'
import { commonElMessageBox, tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'
import { useRouter } from 'vue-router'

const router = useRouter()
const blogStore = useBlogStore()

onMounted(async () => {
  await blogStore.queryAdminBlog()
})

/**
 * 点击切换博客页数按钮
 * @param page 页码
 * @param pageSize 每页大小
 */
const changePageClick = async (page: number, pageSize: number) => {
  blogStore.adminPageInfo.currentPage = page
  blogStore.adminPageInfo.pageSize = pageSize
  await blogStore.queryAdminBlog()
}

/**
 * 点击新增博客按钮
 */
const addNewBlogClick = () => {
  router.push({ name: 'AdminBlogDetailId', params: { id: 0 } })
}

/**
 * 点击预览博客按钮
 * @param blog 博客
 */
const previewBlogClick = async (blog: IBlog) => {
  await router.push({ name: 'AdminBlogPreviewId', params: { id: blog.id } })
}

/**
 * 点击编辑博客按钮
 * @param blog 博客
 */
const editBlogClick = async (blog: IBlog) => {
  await router.push({ name: 'AdminBlogDetailId', params: { id: blog.id } })
}

/**
 * 点击删除博客按钮
 * @param blog 博客
 */
const deleteBlogClick = (blog: IBlog) => {
  blogStore.blogApiType = 'DELETE'

  commonElMessageBox('是否确认删除该博客?').then(() => {
    blogStore.handleBlogApi(blog.id)
  })
}
</script>
